<template>
	<!-- 明细 -->
	<view class="content display  width-100 displayColumn">

		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">推广明细</text>
			</template>
		</u-navbar>

		<!-- 内容 -->
		<view class="fn_withdraw display  width-100 all_item M-T30">
			<view class="fn_withdraw_all display  width-100 displayColumn all_item">
				<span class="fontSize font_comm M-T30">￥<span style="font-size: 44rpx;">500</span></span>
				<span class="fontSize font_comm M-T24">可提现余额</span>
				<button class="fontSize font_comm all_item display M-T48" @click="cashout">提现</button>
			</view>
		</view>
		<!-- 切换栏 -->
		<view class="changes display  width-100 all_item M-T36">
			<view class="changes_all display  ">
				<view :class="{fn_item:true, display:true,  displayColumn:true, all_item:true, 'M-L100':index!=0}"
					v-for="(item,index) in arr" :key="index" @click="selectIndex=index">
					<span
						:class="{fontSize:true, font_comm:true, txt1:selectIndex!=index,txt2:selectIndex==index}">{{item}}</span>
					<view class="fn_line display  " style="margin-top: 6rpx;" v-if="selectIndex==index"></view>
				</view>
			</view>
		</view>

		<!-- 时间 -->
		<view class="fn_time display  width-100 M-T24 all_item">
			<view class="fn_time_all display  width_699">
				<view class="fn_one display  displaycenter_aliem">
					<span class="fontSize font_comm fn_txt1">支出：200</span>
					<span class="fontSize font_comm fn_txt1 M-L50">收入：100</span>
				</view>
				<view class="fn_one display  displaycenter_aliem" @click="selectTime">
					<span class="fontSize font_comm fn_txt1 M-R8">{{time}}</span>
					<uni-icons type="right" color="#72778A" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="fn_list display  width-100 all_item M-T24">
			<listCard></listCard>
		</view>

		<!-- 时间选择器 -->
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="date" :minDate="1587524800000"
			:maxDate="1786778555000" defaultIndex='[0,0,0]' @confirm="confirm" @cancel="cancle"></u-datetime-picker>
	</view>
</template>

<script>
	import listCard from './components/list.vue'
	export default {
		components: {
			listCard
		},
		data() {
			return {
				selectIndex: 0, //全部收入支出  默认为全部
				arr: ['全部', '收入', '支出'],
				show: false,
				value1: '',
				time:'2024-10-11'
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			// 选择时间
			selectTime() {
				this.show = true;
			},
			confirm(e){
				console.log(e)
				this.time = uni.$u.date(e.value, 'yyyy-mm-dd')
				this.show = false;
			},
			cancle(){
				this.show = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 体现
			cashout(){
				this.$tab.navigateTo('/pages/wallet/wallet')
			}
		}
	}
</script>
<style>
	page {
		background: #F4F5FA;
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
	}

	.title {
		font-weight: 600;
		color: #212121;
		font-size: 32rpx;
	}

	.fn_withdraw_all {
		width: 690rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		:nth-child(1) {
			font-weight: 600;
			font-size: 24rpx;
			color: #FF672D;
		}

		:nth-child(2) {
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}

		:nth-child(3) {
			width: 152rpx;
			height: 62rpx;
			background: #126BC9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.changes_all {
		width: 690rpx;


	}

	.txt1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A
	}

	.txt2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_line {
		width: 36rpx;
		height: 6rpx;
		background: #126BC9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.fn_time_all {
		justify-content: space-between;

		.fn_txt1 {
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}
	}
</style>